7. Visualization of various data

Open Research Forum

11/20(Sun), 11/21(Mon)

A history of data visualization & graphic communication

Scrollytelling

Storytelling by scrolling operation

Recently became popular

New York Times

Paper on Scrollytelling

Examples of Scrollytelling

Visualization of table data

Excel data, etc.

Any attribute used for X/Y axis

Correlation

Timeline

PerspectiveWall

Paste a large table on 3D wall

Far data are displayed small

https://s3-ap-northeast-1.amazonaws.com/masui.org/d/b/dbd6789eb9d669c471a83552c101b02e.gif

Video: PerspectiveWall

https://www.youtube.com/watch?v=hYUZbrWtCZg

Nonlinear zooming of tables

TableLens

DateLens

FiCell

TableLens

Display a large table in a small space

Only show necessary rows/columns

Numbers or graphs

Video: TableLens

https://www.youtube.com/watch?v=qWqTrRAC52U

Nonlinear zooming of calendar

http://gyazo.com/de1f0ef32627802b3e555f5f5cbea9ac.png

Video: DateLens

https://www.youtube.com/watch?v=CwZs0SuN8lM

Use fisheye lens for table data

http://gyazo.com/813fa7fb66f2807858e0160d66559405.png

FilmFinder

Show various movie data on table

Realtime filtering using dinamic query

Fine-control slider for selecting conditions

https://s3-ap-northeast-1.amazonaws.com/masui.org/9/c/9cc8f3a3c537d01efd8bbdaf9a78aa21.gif

Video: FilmFinder

https://s3-ap-northeast-1.amazonaws.com/masui.org/c/a/cae12f5fb5813f1b6be21abd6329b2d6.mp4

TileBar

Show keyword distributions like tiles

https://s3-ap-northeast-1.amazonaws.com/masui.org/1/9/19518d9fc81d91a7cdd2c2a44ffbcbce.gif

Visualization of multi-attribute data

Sparklines

http://gyazo.com/21f14e81c0d0212d362a5041f7d47040.png

Visualization of timeline

Most popular and simple graph

http://gyazo.com/0a04b12cdb7915cf5794b0bc397810f0.png

Google "graph"

http://gyazo.com/e1584e9d090c53ccf5bbc250fd99ac42.png

Y-axis for timeline

http://gyazo.com/8baf8b82a1e7a51db6d250c7da63f91e.png

Sparkline

Show graphs by icons

https://gyazo.com/bfea05310bdd0339302827150ab9cd7e

http://gyazo.com/756419809b28a762c5f9b0f84f1b8b8b.png

http://gyazo.com/5e7366abfc71853eb3904cfe8cf3d317.png

LifeLines

Juvenile delinquency data

https://s3-ap-northeast-1.amazonaws.com/masui.org/0/e/0e238c5693fc9f04f09be9fef8c67cc4.gif

See-log (見えログ)

Visualization of network log

http://gyazo.com/da09eac3bfe7230b460fb7c433280dcf.png

Visualization of Wikipedia edit history

http://gyazo.com/248b7f2692553e0474280f1c51bbd378.png

Editing history of "abortion"

http://gyazo.com/47ba75aff16d3e1f511bf40da93dfb3e.png

SeeSoft

Visualization tools for software development

https://s3-ap-northeast-1.amazonaws.com/masui.org/3/1/31164d1dc490ccc68827bf6dd30fe2ff.gif

http://gyazo.com/e302c5ea1380447b58495bfe25710c5d.png

http://gyazo.com/e04d8f9eb8d1dba6849c87724e0f4b2a.png

Visualizing Empires Decline

Showing timeline by animation

http://gyazo.com/77f6086ad6338de2ef15dd16f8bda00a.png

https://vimeo.com/11506746

Visualization by Nightingale

Years shown by angle

http://gyazo.com/58cf7b2762c167f5651500466f80f064.png

Other graphs

Donut graph

Scatterplot

Radar chart

Contour graph

Parallel Coordinates

Hearmap

Age visualization

Excel graphs

Bar chart

Horizontal bar chart

Line chart

Pie chart

Scatterplot

Area chart

Donut graph

Ladar chart

Contour graph

Bubble chart

Stock chart

Cylinder graph

Corn graph

Pyramid graph

Donut graph

http://gyazo.com/8570e4549b6e8bcb0c8567cbf85f574b.png

Contour graph

Drawn on Excel

http://gyazo.com/496fcf5783f6aa5946f2ecd8ba0d8813.png

Contour graph

Drawn using Mathematica

http://gyazo.com/d03154eeb529d6cbddf7862010e7fc8a.png

https://gyazo.com/cdd4e25f733d26bdaf54ff42a5e6bcf7

Ladar chart

http://gyazo.com/695143a6ef2c1ccb148fc61e63add8f2.png

Scatterplot

Good for finding correlation

https://gyazo.com/5fee956d8e50e30dcd19d0a10eaad71d

Visualizing various statistics of the world

http://gyazo.com/26dc8c48f8b97a83499d7a632845cf6c.png

Gapminder

https://www.youtube.com/watch?v=BPt8ElTQMIg

Parallel Coordinates

Show multiple attributes by x-axis

http://gyazo.com/e532c2c617c9a7344b68a75fa57fb5cc.png

Parallel Coordinates

http://gyazo.com/720129635d12c2602d1990fdc96ce417.png

ParallAX software

http://gyazo.com/449fbc02de153745dad937ad5b2ecaaa.png

Prof. Alfred Inselberg

at Ochanomizu University (2015)

http://gyazo.com/34228bfdf7167bf8e0387063aa0194aa.png

EYE-CANDY

http://gyazo.com/46d10c6e9b4e3bed7a85a7ebca409c5e.png

Mapping between map and graph

Selecting lines => area highlighted

Video: Parallel Coordinates

https://www.youtube.com/watch?v=cv_g2OB73EU

Parallel Coordinate

https://www.youtube.com/watch?v=xJEoEAI08UQ

Parallel Sets

http://gyazo.com/4f0137f0af484ea56379e4db50a41bfa.png

Combination of tag cloud and parallel coordinates

http://gyazo.com/216fe1491b7cd2fb32c2c57b9c8d98fb.png

Video: Parallel Tag Clouds

Heat map

Show attributes in colors

Visualization of correlations

Combination with treemaps

Heatmap for Web page focus points

http://gyazo.com/881d43ce6daa6fbaee51d36e166ab15c.png

Visualization of stock price up/down

http://gyazo.com/4be861f7952800433058425190618092.png

Visualization for gene analysis

http://gyazo.com/7ef8b7760597c13d4eee504f4cfdc3a7.png

Visualization of Gene information

Heat map and parallel coordinate

http://gyazo.com/5b2db410acefefe54c780111a59e034b.png

https://www.youtube.com/watch?v=pNTZPOqg8N0

(SOM)Self-organizing map

Map multidimensional data into 2D space

Put similar data nearby

https://s3-ap-northeast-1.amazonaws.com/masui.org/4/d/4ddf6affb581e7eacf39ad880bca921c.gif

https://s3-ap-northeast-1.amazonaws.com/masui.org/7/7/77112602ff513c413a85d0ec4ab65206.gif

Visualiatoin of oldness

Aging links

Aging badkground

Old links shown with blur

http://gyazo.com/1529ed75aa3fcc9b06680c9cfb65846c.png

Show age by texture

http://www.pitecan.com/Enzan/ http://gyazo.com/c7d37199ab3cf8cbfe52b9bce50e63d5.png

http://gyazo.com/6b1cc45a176dc572422b91da0519019a.png

"telomere" on Scrapbox

The lines at the left show how old the lines are

https://gyazo.com/5480309bba5b66ac273abeb38a78de3d

Chart junk

http://oku.edu.mie-u.ac.jp/~okumura/blog/node/2548 http://gyazo.com/e915d0923f2402253cc559e283124568.png

Chart junk

http://gyazo.com/5e8329f85cdf460214aae0a5aece924a.png

Chart junk

Deceptive graph

https://gyazo.com/c8b93a67603d32b1f72e1928dd81df9a

Deceptive circle graph

https://gyazo.com/789e37ee5b9bb78a4c4296e97f0e96bb

Various graphs @ Pinterest

http://www.pinterest.com/masui/visualization-ideas/ http://gyazo.com/dc3b784293236505cd7c18e254769957.png

End